import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:mtf/R.dart';
import 'package:mtf/app/modules/upload_voucher_module/upload_voucher_controller.dart';
import 'package:mtf/app/theme/app_boxDecoration.dart';
import 'package:mtf/app/theme/app_colors.dart';
import 'package:mtf/app/widget/AppBarLeftTitle.dart';
import 'package:mtf/app/widget/SettingBar.dart';
/**
 * GetX Template Generator - fb.com/htngu.99
 * */

class uploadVoucherPage extends GetView<uploadVoucherController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBarLeftTitle(title: "上传凭证"),
      body: Stack(
        children: [
          ListView.builder(
            itemBuilder: (context, index) {
              if (index == 0) {
                return Container(
                  width: double.infinity,
                  padding: EdgeInsets.symmetric(vertical: 13),
                  color: Colors.white,
                  child: Obx(() {
                    return Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Visibility(
                          visible: controller.showBank.value,
                          child: Expanded(
                            flex: 1,
                            child: InkWell(
                              onTap: () {
                                controller.selectIndexObs = 0;
                              },
                              child: Column(
                                children: [
                                  Text(
                                    "银联支付",
                                  ),
                                  Visibility(
                                      maintainState: true,
                                      maintainSize: true,
                                      maintainAnimation: true,
                                      visible: controller.selectIndexObs == 0,
                                      child: Container(
                                        margin: EdgeInsets.only(top: 5),
                                        height: 4,
                                        width: 16,
                                        decoration: BoxDecoration(
                                            borderRadius:
                                                BorderRadius.circular(2),
                                            color: c_f12f38),
                                      ))
                                ],
                              ),
                            ),
                          ),
                        ),
                        Visibility(
                          visible: controller.showWx.value,
                          child: Expanded(
                            flex: 1,
                            child: InkWell(
                              onTap: () {
                                controller.selectIndexObs = 1;
                              },
                              child: Column(
                                children: [
                                  Text(
                                    "微信支付",
                                  ),
                                  Visibility(
                                      maintainState: true,
                                      maintainSize: true,
                                      maintainAnimation: true,
                                      visible: controller.selectIndexObs == 1,
                                      child: Container(
                                        margin: EdgeInsets.only(top: 5),
                                        height: 4,
                                        width: 16,
                                        decoration: BoxDecoration(
                                            borderRadius:
                                                BorderRadius.circular(2),
                                            color: c_f12f38),
                                      ))
                                ],
                              ),
                            ),
                          ),
                        ),
                        Visibility(
                          visible: controller.showAlipay.value,
                          child: Expanded(
                            flex: 1,
                            child: InkWell(
                              onTap: () {
                                controller.selectIndexObs = 2;
                              },
                              child: Column(
                                children: [
                                  Text(
                                    "支付宝",
                                  ),
                                  Visibility(
                                      maintainState: true,
                                      maintainSize: true,
                                      maintainAnimation: true,
                                      visible: controller.selectIndexObs == 2,
                                      child: Container(
                                        margin: EdgeInsets.only(top: 5),
                                        height: 4,
                                        width: 16,
                                        decoration: BoxDecoration(
                                            borderRadius:
                                                BorderRadius.circular(2),
                                            color: c_f12f38),
                                      ))
                                ],
                              ),
                            ),
                          ),
                        )
                      ],
                    );
                  }),
                );
              } else if (index == 1) {
                return Container(
                  margin: EdgeInsets.all(10),
                  padding: EdgeInsets.symmetric(vertical: 15),
                  width: double.infinity,
                  decoration: r10WhiteDecoration,
                  child: Column(
                    children: [
                      Text("充值金额"),
                      SizedBox(
                        height: 5,
                      ),
                      Text.rich(TextSpan(children: [
                        TextSpan(text: "￥ "),
                        TextSpan(
                          text: "${controller.preMoney}",
                          style: TextStyle(
                              color: c_333333,
                              fontSize: 24,
                              fontWeight: FontWeight.w500),
                        )
                       ,
                      ])),
                      SizedBox(
                        height: 5,
                      ),
                      Text.rich(TextSpan(children: [
                        TextSpan(
                            text: "预计到账:${controller.rechargeMoney}usd",
                            style: TextStyle(color: c_999999, fontSize: 12)),
                        // TextSpan(
                        //   text: "1000 USD",
                        //   style: TextStyle(
                        //       color: c_f12f38,
                        //       fontSize: 12,
                        //       fontWeight: FontWeight.w500),
                        // ),
                      ]))
                    ],
                  ),
                );
              } else if (index == 2) {
                return Container(
                  margin: EdgeInsets.symmetric(horizontal: 10),
                  width: double.infinity,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      gradient: LinearGradient(
                          begin: Alignment.topCenter, //渐变开始于上面的中间开始
                          end: Alignment.bottomCenter,
                          colors: [
                            Color(0xffFFECE9),
                            Colors.white,
                            Colors.white
                          ])),
                  child: Column(
                    children: [
                      SettingBar(
                        backgroupColor: Colors.transparent,
                        paddingHorizontal: 0,
                        leftTextBold: true,
                        leftIcon: Container(
                          width: 3,
                          height: 14,
                          decoration: BoxDecoration(
                              gradient: LinearGradient(
                                  begin: Alignment.topCenter, //渐变开始于上面的中间开始
                                  end: Alignment.bottomCenter,
                                  colors: [
                                    Color(0xffFF7700),
                                    Color(0xffFF4800),
                                    Color(0xffFF0000)
                                  ]),
                              borderRadius: BorderRadius.circular(2)),
                        ),
                        leftText: "打款方式",
                        leftIconSpace: 10,
                        leftTextColor: c_333333,
                      ),
                      Obx(() {
                        return Visibility(
                            visible: controller.selectIndexObs == 0,
                            child: Column(
                              children: [
                                Obx(() {
                                  return SettingBar(
                                    backgroupColor: Colors.transparent,
                                    showDivider: true,
                                    rightTextBold: true,
                                    leftTextColor: c_666666,
                                    leftTextSize: 14,
                                    leftText: "持有人姓名",
                                    rightText: controller.bankName.value,
                                    rightIcon: InkWell(
                                      onTap: () {
                                        controller
                                            .copy(controller.bankName.value);
                                      },
                                      child: Row(
                                        children: [
                                          Icon(
                                            Icons.copy,
                                            color: c_f12f38,
                                            size: 14,
                                          ),
                                          Text(
                                            "复制",
                                            style: TextStyle(color: c_f12f38),
                                          )
                                        ],
                                      ),
                                    ),
                                  );
                                }),
                                Obx(() {
                                  return Container(
                                    child: SettingBar(
                                      backgroupColor: Colors.transparent,
                                      showDivider: true,
                                      rightTextBold: true,
                                      leftTextColor: c_666666,
                                      leftTextSize: 14,
                                      leftText: "银行卡号",
                                      rightText: controller.bankNum.value,
                                      rightIcon: InkWell(
                                        onTap: () {
                                          controller
                                              .copy(controller.bankNum.value);
                                        },
                                        child: Row(
                                          children: [
                                            Icon(
                                              Icons.copy,
                                              color: c_f12f38,
                                              size: 14,
                                            ),
                                            Text(
                                              "复制",
                                              style: TextStyle(color: c_f12f38),
                                            )
                                          ],
                                        ),
                                      ),
                                    ),
                                  );
                                }),
                                Obx(() {
                                  return SettingBar(
                                    backgroupColor: Colors.transparent,
                                    showDivider: true,
                                    rightTextBold: true,
                                    leftTextColor: c_666666,
                                    leftTextSize: 14,
                                    leftText: "开户行",
                                    rightText: controller.bankAddress.value,
                                    rightIcon: InkWell(
                                      onTap: () {
                                        controller
                                            .copy(controller.bankAddress.value);
                                      },
                                      child: Row(
                                        children: [
                                          Icon(
                                            Icons.copy,
                                            color: c_f12f38,
                                            size: 14,
                                          ),
                                          Text(
                                            "复制",
                                            style: TextStyle(color: c_f12f38),
                                          )
                                        ],
                                      ),
                                    ),
                                  );
                                }),
                              ],
                            ));
                      }),
                      Obx(() {
                        return Visibility(
                          child: Image.network(
                            controller.selectIndexObs == 1
                                ? controller.wxUrl.value
                                : controller.alipayUrl.value,
                            width: 217,
                            height: 217,
                            fit: BoxFit.fill,
                          ),
                          visible: controller.selectIndexObs > 0,
                        );
                      }),
                    ],
                  ),
                );
              } else if (index == 3) {
                return Obx(() {
                  return Visibility(
                    visible: controller.selectIndexObs == 0,
                    child: Container(
                        margin:
                            EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                        child: Obx(() {
                          return SettingBar(
                              onTap: () {
                                controller.clickBankManager();
                              },
                              leftText: "银行卡",
                              rightText: controller.choiceBankName.value,
                              rightIcon:
                                  SvgPicture.asset(R.assetsImgIcSvgRight));
                        })),
                  );
                });
              } else if (index == 4) {
                return Container(
                  margin: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                  width: double.infinity,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      gradient: LinearGradient(
                          begin: Alignment.topCenter, //渐变开始于上面的中间开始
                          end: Alignment.bottomCenter,
                          colors: [
                            Color(0xffFFECE9),
                            Colors.white,
                            Colors.white
                          ])),
                  child: Column(
                    children: [
                      SettingBar(
                        backgroupColor: Colors.transparent,
                        paddingHorizontal: 0,
                        leftTextBold: true,
                        leftIcon: Container(
                          width: 3,
                          height: 14,
                          decoration: BoxDecoration(
                              gradient: const LinearGradient(
                                  begin: Alignment.topCenter, //渐变开始于上面的中间开始
                                  end: Alignment.bottomCenter,
                                  colors: [
                                    Color(0xffFF7700),
                                    Color(0xffFF4800),
                                    Color(0xffFF0000)
                                  ]),
                              borderRadius: BorderRadius.circular(2)),
                        ),
                        leftText: "打款截图",
                        leftIconSpace: 10,
                        leftTextColor: c_333333,
                      ),
                      Padding(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 10, vertical: 15),
                        child: Obx(() {
                          return GridView.builder(
                            shrinkWrap: true,
                            itemCount: controller.imageArray.length + 1,
                            physics: NeverScrollableScrollPhysics(),
                            gridDelegate:
                                const SliverGridDelegateWithFixedCrossAxisCount(
                              crossAxisSpacing: 10.0, //水平子 Widget 之间间距
                              crossAxisCount: 3, //一行的 Widget 数量
                            ),
                            itemBuilder: (context, index) {
                              if (index == controller.imageArray.length) {
                                return InkWell(
                                  onTap: () {
                                    controller.selectImage();
                                  },
                                  child: Visibility(
                                    child: SvgPicture.asset(
                                        R.assetsImgIcSvgPhoto,
                                        width: 96,
                                        height: 96),
                                    visible: controller.imageArray.length < 3,
                                  ),
                                );
                              } else {
                                return Stack(
                                  children: [
                                    Container(
                                      margin: EdgeInsets.all(5),
                                      child: Image.network(
                                        controller.imageArray[index],
                                        width: 96,
                                        height: 96,
                                        fit: BoxFit.contain,
                                      ),
                                    ),
                                    Align(
                                      alignment: Alignment.topRight,
                                      child: InkWell(
                                        onTap: () {
                                          controller.imageArray.removeAt(index);
                                        },
                                        child: Container(
                                            alignment: Alignment.center,
                                            width: 22,
                                            height: 22,
                                            decoration: BoxDecoration(
                                                shape: BoxShape.circle,
                                                color: c_bbbbbb),
                                            child: Icon(
                                              Icons.close,
                                              color: Colors.white,
                                              size: 22,
                                            )),
                                      ),
                                    )
                                  ],
                                );
                              }
                            },
                          );
                        }),
                      )
                    ],
                  ),
                );
              } else {
                return Container(
                  width: double.infinity,
                  margin: EdgeInsets.only(left: 10, right: 10, bottom: 60),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10)),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      SettingBar(
                        backgroupColor: Colors.transparent,
                        paddingHorizontal: 0,
                        leftTextBold: true,
                        leftIcon: Container(
                          width: 3,
                          height: 14,
                          decoration: BoxDecoration(
                              gradient: const LinearGradient(
                                  begin: Alignment.topCenter, //渐变开始于上面的中间开始
                                  end: Alignment.bottomCenter,
                                  colors: [
                                    Color(0xffFF7700),
                                    Color(0xffFF4800),
                                    Color(0xffFF0000)
                                  ]),
                              borderRadius: BorderRadius.circular(2)),
                        ),
                        leftText: "示例参考",
                        leftIconSpace: 10,
                        leftTextColor: c_333333,
                      ),
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 10),
                        child: Text(
                          "银行电子回单截图需包括：\n交易订单号、支付时间、实际支付金额及银行印章。\n1、截图格式请使用*.JPG或*.PNG文件。\n2、图片大小限5MB以下。",
                          style: TextStyle(color: c_999999, fontSize: 12),
                        ),
                      ),
                      Obx(() => Image.asset(controller.selectIndexObs == 0
                          ? R.assetsImgBgVoucherBank
                          : R.assetsImgBgVoucherAliwx))
                    ],
                  ),
                );
              }
            },
            shrinkWrap: true,
            itemCount: 6,
          ),
          Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                margin: const EdgeInsets.only(top: 30, left: 10, right: 10),
                width: double.infinity,
                height: 48,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(24),
                  color: c_f12f38,
                ),
                child: TextButton(
                    child: Text("提交",
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 16,
                            fontWeight: FontWeight.bold)),
                    onPressed: () {
                      controller.reqRecharge();
                    }),
              ))
        ],
      ),
    );
  }
}
